import { Component } from 'react';
import classNames from 'classnames';
import styles from './filter.less';
import { MenuItem,Icon,Tooltip,Tab,Tabs,Button,Label } from '@blueprintjs/core';
import { Select,TreeSelect } from 'antd';
import { connect } from 'dva';
import { ajax_post,ajax_get } from '../../../api/ajax';
import ScrollWrapper from '../../../components/ScrollWrapper';
import router from 'umi/router';
import {updateState} from '../../../models/global';

const { TreeNode } = TreeSelect;

const orderOptions = values => {
  return values.filter(v => v.isFixed).concat(values.filter(v => !v.isFixed));
};

class FilterPanel extends Component {
    constructor(props) {
        super(props);
        this.state = {
          country: [
            // {titie: "1",key: 1,value:1,children: [
            //   {titie: "1-1",key: 2,value:3}
            // ]}
          ],//行政列表
          selectCountrys: [],//已选择行政列表
          types: [//类型列表
            {value: "street",key:"street",title: "街道"},
            {value: "build",key:"build",title: "建筑物"},
            {value: "load",key:"load",title: "居民点"},
          ],
          selectTypes: [],//已选择的类型列表
          positionProblems: [//位置问题列表
            {value: "1",key:"1",title: "无疑问"},
            {value: "2",key:"2",title: "起止点有问题"},
            {value: "3",key:"3",title: "无法定位"},
            {value: "4",key:"4",title: "与其他道路重叠"},
          ],
          selectPositionProblems: [],//已选择的位置问题列表
          shapes: [//形状列表
            {value: "1",key:"1",title:  "正常"},
            {value: "2",key:"2",title:  "十字形"},
            {value: "3",key:"3",title:  "Y形"},
            {value: "4",key:"4",title:  "O形"},
            {value: "5",key:"5",title:  "分段"},
            {value: "6",key:"6",title:  "之行"},
            {value: "7",key:"7",title:  "特殊性"},
          ],
          selectShapes: [],//已选择的形状列表
          nameProblems: [//名称问题列表
            {value: "1",key:"1",title:  "区内重名"},
            {value: "2",key:"2",title:  "跨区重名"},
            {value: "3",key:"3",title:  "一地多名"},
            {value: "4",key:"4",title:  "一名多写"},
            {value: "5",key:"5",title:  "大地名"},
            {value: "6",key:"6",title:  "洋地名"},
            {value: "7",key:"7",title:  "怪地名"},
          ],
          selectNameProblems: [],//已选择的名称问题列表
          Plannings: [//规划情况列表
            {value: "1",key:"1",title:  "已建成"},
            {value: "2",key:"2",title:  "部分建成"},
            {value: "3",key:"3",title:  "规划中"},
          ],
          selectPlannings: [],//已选择的规划情况列表
          nonStandards: [//不规范检查列表
            {value: "1",key:"1",title:  "百度错误"},
            {value: "2",key:"2",title:  "高德错误"},
            {value: "3",key:"3",title:  "天地图错误"},
            {value: "4",key:"4",title:  "谷歌错误"},
          ],
          selectNonStandards: [],//已选择的不规范检查列表
        }
    }

    queryCountry = () => {
    	ajax_get({
    		url:`/dm/tree/`,
    		data: {level:0, type: "districts"}
    	}).then((res)=>{
    		if(!res || !res.data) {
    			this.setState({country: []});
    			return;
    		}
    		let country = [];
    		res.data.map((item,index) => {
    			country.push({
            title: item.name,
            value: item.code + "-" + index,
            key: index,
          });
    		});
    		this.setState({country});
    	}).catch((data)=>{
    		this.setState({country: []});
    	})
    }

    /* *
     * 行政类型选择
     */
    handleCountryChange = value => {
      let hasPar = false;
      value.map(val => {
        if((val.split('-')).length-1 === 1) {
          hasPar = true;
        }
      })
      if(hasPar) return;
      console.log(value)
      this.setState({selectCountrys:value})
        // switch (action) {
        //   case 'remove-value':
        //   case 'pop-value':
        //     if (removedValue.isFixed) {
        //       return;
        //     }
        //     break;
        //   case 'clear':
        //     value = this.state.selectedCountrys.filter(v => v.isFixed);
        //     break;
        // }
        // value = orderOptions(value);
        // this.setState({ selectCountrys: value });
        // this.filterTags();
    }

    /* *
     * 类型选择
     */
    handleTypeChange = value => {
        this.setState({selectTypes:value})
    }

    handlePositionChange = value => {
        this.setState({selectPositionProblems:value})
    }

    handleShapesChange = value => {
        this.setState({ selectShapes: value });
    }

    handleNameChange = value => {
        this.setState({ selectNameProblems: value });
    }

    handlePlanningsChange = value => {
        this.setState({ selectPlannings: value });
    }

    handleNonStandardsChange = value => {
        this.setState({ selectNonStandards: value });
    }

    loadCountry = (treeNode) => {
      console.log(treeNode)
      return new Promise((resolve) => {
          if (treeNode.props.children && treeNode.props.children.length) {
              resolve();
              return;
          }
          const countryName = treeNode.props.title;
          ajax_get({
          	url: `/dm/tree/`,
          	data: {level: countryName === '市本级' ? 1 : 0, type: "streets", name: countryName},
          }).then((res)=>{
          	if(!res || !res.data) {
              resolve()
            };
          	const {country} = this.state;
            let arr = [];
          	country.forEach((ct) => {
          		if(countryName === ct.title) {
          			ct.children = res.data.map((item,index) => {
                  return {
                    title: ct.title + "-" + item.name,
                    value: item.code + "-" + ct.key + "-" + index,
                    key: ct.key + "-" + index,
                    isLeaf: true
                  }
                });
          		}
              arr.push(ct)
          	});
          	this.setState({country: arr});
            resolve()
          }).catch((res)=>{
            resolve()
          })
      });
    }

    filterTags = () => {
      const _this = this;
      setTimeout(() => {
        console.log(_this.state)
        const val = {

        }
      },100)
    }

    componentWillMount() {
      this.queryCountry();
    }

    render() {
        const {
          country,selectCountrys,types,selectTypes,positionProblems,selectPositionProblems,
          shapes,selectShapes,nameProblems,selectNameProblems,
          Plannings,selectPlannings,nonStandards,selectNonStandards
        } = this.state;
        return (
            <ScrollWrapper className={styles.scroll}>
                <Label className={classNames(styles.filterLabel)}>行政区:</Label>
                <TreeSelect
                  showSearch
                  style={{ width: 270 }}
                  value={selectCountrys}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  multiple
                  treeData={country}
                  onChange={this.handleCountryChange}
                  loadData={this.loadCountry}
                >
                </TreeSelect>
                <Label className={classNames(styles.filterLabel)}>类型:</Label>
                <TreeSelect
                  showSearch
                  style={{ width: 270 }}
                  value={selectTypes}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  multiple
                  treeData={types}
                  onChange={this.handleTypeChange}
                >
                </TreeSelect>
                <Label className={classNames(styles.filterLabel)}>位置问题:</Label>
                <TreeSelect
                  showSearch
                  style={{ width: 270 }}
                  value={selectPositionProblems}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  multiple
                  treeData={positionProblems}
                  onChange={this.handlePositionChange}
                >
                </TreeSelect>
                <Label className={classNames(styles.filterLabel)}>形状:</Label>
                <TreeSelect
                  showSearch
                  style={{ width: 270 }}
                  value={selectShapes}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  multiple
                  treeData={shapes}
                  onChange={this.handleShapesChange}
                >
                </TreeSelect>
                <Label className={classNames(styles.filterLabel)}>名称问题:</Label>
                <TreeSelect
                  showSearch
                  style={{ width: 270 }}
                  value={selectNameProblems}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  multiple
                  treeData={nameProblems}
                  onChange={this.handleNameChange}
                >
                </TreeSelect>
                <Label className={classNames(styles.filterLabel)}>规划情况:</Label>,
                <TreeSelect
                  showSearch
                  style={{ width: 270 }}
                  value={selectPlannings}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  multiple
                  treeData={Plannings}
                  onChange={this.handlePlanningsChange}
                >
                </TreeSelect>
                <Label className={classNames(styles.filterLabel)}>不规范检查:</Label>,
                <TreeSelect
                  showSearch
                  style={{ width: 270 }}
                  value={selectNonStandards}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  multiple
                  treeData={nonStandards}
                  onChange={this.handleNonStandardsChange}
                >
                </TreeSelect>
                {/* <Select
                    options={country}
                    value={selectCountrys}
                    isMulti = {true}
                    className='super-select-container'
                    classNamePrefix = 'super-select'
                    placeholder = '请选择...'
                    onChange={this.handleCountryChange}
                    noOptionsMessage = {() => { return '没有选项了'}}
                />
                <Label className={classNames(styles.filterLabel)}>类型:</Label>
                <Select
                    options={types}
                    value={selectTypes}
                    isMulti = {true}
                    className='super-select-container'
                    classNamePrefix = 'super-select'
                    placeholder = '请选择...'
                    onChange={this.handleTypeChange}
                    noOptionsMessage = {() => { return '没有选项了'}}
                />
                <Label className={classNames(styles.filterLabel)}>位置问题:</Label>
                <Select
                    options={positionProblems}
                    value={selectPositionProblems}
                    isMulti = {true}
                    className='super-select-container'
                    classNamePrefix = 'super-select'
                    placeholder = '请选择...'
                    onChange={this.handlePositionChange}
                    noOptionsMessage = {() => { return '没有选项了'}}
                />
                <Label className={classNames(styles.filterLabel)}>形状:</Label>
                <Select
                    options={shapes}
                    value={selectShapes}
                    isMulti = {true}
                    className='super-select-container'
                    classNamePrefix = 'super-select'
                    placeholder = '请选择...'
                    onChange={this.handleShapesChange}
                    noOptionsMessage = {() => { return '没有选项了'}}
                />
                <Label className={classNames(styles.filterLabel)}>名称问题:</Label>
                <Select
                    options={nameProblems}
                    value={selectNameProblems}
                    isMulti = {true}
                    className='super-select-container'
                    classNamePrefix = 'super-select'
                    placeholder = '请选择...'
                    onChange={this.handleNameChange}
                    noOptionsMessage = {() => { return '没有选项了'}}
                />
                <Label className={classNames(styles.filterLabel)}>规划情况:</Label>
                <Select
                    options={Plannings}
                    value={selectPlannings}
                    isMulti = {true}
                    className='super-select-container'
                    classNamePrefix = 'super-select'
                    placeholder = '请选择...'
                    onChange={this.handlePlanningsChange}
                    noOptionsMessage = {() => { return '没有选项了'}}
                />
                <Label className={classNames(styles.filterLabel)}>不规范检查:</Label>
                <Select
                    options={nonStandards}
                    value={selectNonStandards}
                    isMulti = {true}
                    className='super-select-container'
                    classNamePrefix = 'super-select'
                    placeholder = '请选择...'
                    onChange={this.handleNonStandardsChange}
                    noOptionsMessage = {() => { return '没有选项了'}}
                /> */}
            </ScrollWrapper>
        )
    }
}


function mapStateToProps(state) {
    return {
        map: state.map.map
    };
}

export default connect(mapStateToProps)(FilterPanel);
